/* eslint-disable no-unused-vars */
<template>
<!-- 基础试题组件 -->
  <div class='queation-container'>
    <el-card>
      <!-- 头部内容 新增试题按钮 -->
       <div class="btn-wrapper">
        <span style="color:pink;font-size:12px">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" size="small" @click='goques'>
          <i class="el-icon-edit"></i>
          新增试题
        </el-button>
      </div>
      <!-- end -->
  <!-- 表单筛选内容部分 -->
  <el-form ref="formData" :model="formData"  :rules="rules" size="medium" label-width="100px" >
    <el-row :gutter="15">
     <el-col :span="6">
    <el-form-item label="学科" prop="subjectID">
     <el-select
            @change="handleSub"
            @keyup.enter="handleFilter"
            v-model="formData.subjectID"
            placeholder="请输入学科"
            clearable
            :style="{width: '100%'}">
      <el-option v-for="(item,index) in subNameList" :key="index" :value="item.value" :label="item.label"></el-option>
    </el-select>
  </el-form-item>
  </el-col>
  <el-col :span="6">
   <el-form-item label="二级目录" prop="twoLevelDisplay">
     <el-select
        v-model="formData.twoLevelDisplay"
        @keyup.enter="handleFilter"
        placeholder="请输入二级目录"
        clearable
        :style="{width: '100%'}">
      <el-option
        v-for="(item,i) in twoLeveList" :key="i"
        :label="item.label"
        :value="item.value">
        </el-option>
    </el-select>
  </el-form-item>
</el-col >
  <el-col :span="6">
  <el-form-item label="标签" prop="tags">
    <el-select v-model="formData.tags" placeholder="请输入标签" clearable :style="{width: '100%'}">
      <el-option v-for="(item,i) in tagsList" :key="i"  :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </el-form-item>
  </el-col>
  <el-col :span="6">
  <el-form-item @keyup.enter="handleFilter" label="关键字" prop="keyword">
    <el-input  v-model="formData.keyword" placeholder="请输入关键字" clearable :style="{width: '100%'}" >
    </el-input>
  </el-form-item>
  </el-col>
<el-col :span="6">
 <el-form-item @keyup.enter="handleFilter" label="试题类型" prop="questionType">
    <el-select v-model="formData.questionType" placeholder="请输入试题类型" clearable
        :style="{width: '100%'}">
      <el-option v-for="(item, index) in Constants.questionType" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
    </el-select>
  </el-form-item>
</el-col>
<el-col :span="6">
  <el-form-item @keyup.enter="handleFilter" label="难度" prop="difficulty">
    <el-select v-model="formData.difficulty" placeholder="请输入难度" clearable :style="{width: '100%'}">
     <el-option v-for="(item, index) in Constants.difficulty" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
    </el-select>
  </el-form-item>
</el-col>
  <el-col :span="6">
          <el-form-item @keyup.enter="handleFilter" label="方向" prop="direction">
            <el-select v-model="formData.direction" placeholder="请输入方向" clearable :style="{width: '100%'}">
              <el-option v-for="(item,index) in Constants.direction"  :key="index" :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
<el-col :span="6">
  <el-form-item @keyup.enter="handleFilter" label="录入人" prop="creatorID">
            <el-select v-model="formData.creatorID" placeholder="请输入录入人" clearable :style="{width: '100%'}">
      <el-option v-for="item in people" :key="item.id" :value="item.username" :label="item.username"></el-option>
    </el-select>
  </el-form-item>
</el-col>
 <el-col :span="6">
          <el-form-item @keyup.enter="handleFilter" label="题目备注" prop="remarks">
            <el-input v-model="formData.remarks" placeholder="请输入题目备注" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
 <el-col :span="6">
          <el-form-item @keyup.enter="handleFilter" label="企业简称" prop="shortName">
            <el-input v-model="formData.shortName" placeholder="请输入企业简称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
<el-col :span="6">
<el-form-item @keyup.enter="handleFilter" label="城市" prop="province">
    <el-select placeholder="请选择"
        class="filter-item"
        style="width: 120px;"
        v-model="formData.province"
        @keyup.enter="handleFilter"
        @change="handleProvince"
        filterable
        :style="{width: '50%'}">
      <el-option
      v-for="item in citySelect.province"
      :key="item"
      :label="item"
      :value="item">
      </el-option>
    </el-select>
     <el-select
     class="filter-item"
    style="width: 120px;"
    v-model="formData.city"
     @keyup.enter="handleFilter"
    filterable
    placeholder="请选择"
    :style="{width: '50%'}">
      <el-option
       v-for="item in citySelect.cityDate"
       :key="item"
       :label="item"
       :value="item"></el-option>
    </el-select>
  </el-form-item>
</el-col>
<el-col :span="6">
  <el-form-item style="margin-left:150px">
    <el-button @click="resetForm">清除</el-button>
  <el-button type="primary" @click="handleFilter" >搜索</el-button>
  </el-form-item>
  </el-col>
  </el-row>
</el-form>
<!-- 表单上半部分 -->

 <!-- 数据记录 -->
 <el-alert
    v-if="alertText !== ''"
    :title="alertText"
    type="info"
    class="alert"
    :closable="false"
    show-icon>
    </el-alert>
    <!-- end -->
  <!-- 数据列表 -->
    <el-table
      :data="basicsQues"
      border
      style="width: 100%;margin-top:10px">
    <el-table-column align="center" label="试题编号">
        <template slot-scope="scope">
            <span>{{scope.row.number}}</span>
        </template>
          </el-table-column>
          <el-table-column align="center" label="学科">
            <template slot-scope="scope">
              <span>{{scope.row.subject}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="目录">
            <template slot-scope="scope">
              <span>{{scope.row.catalog}}</span>
            </template>
          </el-table-column>
          <el-table-column label="题型" align="center" >
            <template slot-scope="scope">
              <span v-if="scope.row.questionType==1">单选</span>
            <span v-else-if="scope.row.questionType==2">多选</span>
            <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="题干" >
           <template slot-scope="scope">
            <span v-html="scope.row.question"></span>
          </template>
          </el-table-column>
          <el-table-column align="center" label="录入时间" >
            <template slot-scope="scope">
              <span>{{scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="难度" >
            <template slot-scope="scope">
             <span v-if="scope.row.difficulty==1">简单</span>
            <span v-else-if="scope.row.difficulty==2">一般</span>
            <span v-else>困难</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入人" >
            <template slot-scope="scope">
            <span>{{scope.row.creator}}</span>
            </template>
          </el-table-column>
          <!-- 操作部分 -->
         <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="200">
        <template slot-scope="scope">
         <el-button @click="lookView(scope.row)" type="text" size="small" icon="el-icon-view" circle class="button1"></el-button>
         <el-button type="text"  size="small" icon="el-icon-edit" circle class="button2"  v-if="scope.row.publishState==2" disabled></el-button>
        <el-button type="text"  size="small" icon="el-icon-edit" circle class="button2" v-else  @click="edit(scope.row.id)"></el-button>
         <el-button type="text"  size="small" icon="el-icon-delete" circle class="button3" v-if="scope.row.publishState==2" disabled></el-button>
        <el-button type="text"  size="small" icon="el-icon-delete" circle class="button3" v-else  @click="removeQues(scope.row)"></el-button>
         <el-button type="text"  size="small" icon="el-icon-check" circle class="button4" @click="addChoice(scope.row.id)" ></el-button>
          </template>
        </el-table-column>
        <!-- 操作end -->
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination">
          <PageTool
            :paginationPage="requestParameters.page"
            :paginationPagesize="requestParameters.pagesize"
            :total="total"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          ></PageTool>
        </div>
        <!-- end -->
      <!-- 预览弹层 -->
      <el-dialog v-bind="$attrs" title="题目预览" :visible.sync="showDialogs" >
        <el-form  size="medium" v-model="quesMess">
          <el-form-item >
            <p><span class="quesStyle" style="margin-left:-40px">【题型】:
             <i v-if="quesMess.questionType==1">单选</i>
             <i v-else-if="quesMess.questionType==2">多选</i>
             <i v-else>简答</i>
           </span>
           <span class="quesStyle">【编号】:{{quesMess.id}}</span>
           <span class="quesStyle">【难度】:
             <i v-if="quesMess.difficulty==1">简单</i>
             <i v-else-if="quesMess.difficulty==2">一般</i>
             <i v-else>困难</i>
           </span>
           <span class="quesStyle">【标签】:{{quesMess.tags}}</span></p>

           <span class="quesStyle" style="margin-left:-40px">【学科】:{{quesMess.subjectID}}</span>
           <span class="quesStyle">【目录】:{{quesMess.directoryName}}</span>
           <span class="quesStyle">【方向】:{{quesMess.direction}}</span>
          </el-form-item>
          <hr>
          <el-form-item>
           <span >【题干】:
             <i style="color:blue" v-html="quesMess.question"></i>
             <i>
                <i v-if="quesMess.questionType==1">单选</i>
                <i v-else-if="quesMess.questionType==2">多选</i>
                <i v-else>简答</i>
                选项:(以下选中的选项为正确答案)
              </i>
              <br>
          <!-- 单选框 -->
      <el-radio-group v-model="radio">
      <el-radio v-for="(ele,i) in basicsQues.options" :key="i" :label="3" v-show="basicsQues.questionType === '1'">{{ele.title}}</el-radio>
      <el-input></el-input>
      </el-radio-group>
           </span>
          </el-form-item>
          <hr>
          <el-form-item>
           <span>【参考答案】:
              <el-button type="danger" size="small" @click="videoPlay"> 视频答案解析</el-button>
              <video :src="quesMess.videoURL" :poster="quesMess.img" v-show="vedios" :autoplay="playStatus" height="421" width="650" >
              </video>
            </span>
          </el-form-item>
          <hr>
          <el-form-item>
           <p>【答案解析】:
             <span v-html="quesMess.answer"></span></p>
          </el-form-item>
          <hr>
          <el-form-item>
           <p>【题目备注】:
             <span v-html="quesMess.remarks"></span></p>
          </el-form-item>
          <hr>
        </el-form>
        <el-row  slot="footer" class="dialog-footer">
          <el-button type="primary" @click="showDialogs = false" >关闭</el-button>
        </el-row>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
// 引入分页组件
import PageTool from '../../module-manage/components/page-tool.vue'
// 引入 获取学科简单列表接口
import { simple as subSimple } from '@/api/hmmm/subjects.js'
// 引入  获取二级目录列表接口
import { simple as dirSimple } from '@/api/hmmm/directorys.js'
// 引入 获取标签列表接口
import { simple as tagsSimple } from '@/api/hmmm/tags.js'
// 引入 用户简单列表接口
import { simple as userSimple } from '@/api/base/users.js'
// 引入基础题库裂变 加入 添加 删除、加入精选题库接口的接口
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions.js'
// 引入 城市数据
import { provinces, citys } from '@/api/hmmm/citys.js'
// 引入 通用常量数据
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
// 过滤空字符串
import { omitBy, isEmpty, isNumber } from 'lodash'
// 视频
// eslint-disable-next-line no-unused-vars
import Video from 'video.js'
import 'video.js/dist/video-js.css'

export default {
  name: 'Question',
  components: {
    PageTool
  },
  data () {
    return {
      // 分页相关
      requestParameters: {
        page: 1,
        pagesize: 2
        // username: this.username
      },
      radio: 3,
      total: null,
      listLoading: true,
      alertText: '',
      rules: {},
      // textarea
      subNameList: [], // 学科列表
      twoLeveList: [], // 二级目录列表
      tagsList: [], // 标签列表
      people: [], // 录入人
      keyword: '', // 关键字
      basicsQues: [], // 基础题库列表
      tempChoiceQues: [], // 精选题库筛选数组列表
      // 头部筛选内容数据
      formData: {
        subjectID: '',
        twoLevelDisplay: '',
        tags: '',
        keyword: '',
        questionType: '',
        province: '',
        city: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: ''
      },
      // 通用常量数据
      Constants: {
        questionType,
        difficulty,
        direction
      },
      showDialogs: false,
      quesMess: [], // 题目预览
      quesTion: [], // 题干内容
      vedios: false,
      // 城市数据
      citySelect: {
        province: [],
        cityDate: []
      },
      // 视频播放数据
      playStatus: ''
    }
  },
  computed: {
  },
  created () {
    this.subSimple()
    this.tagsSimple()
    this.userSimple()
    // this.getList()
    // 初始数据
    this.getFirstList()
    var _this = this
    // this.initialDate()
    this.getCityData()
    // 键盘enter操作
    document.onkeydown = function (e) {
      var key = window.event.keyCode
      if (key === 13) {
        _this.handleFilter(this.requestParameters)
      }
    }
  },
  methods: {

    // 头部的新增按钮 实现点击 跳转到新增试题页面
    goques () {
      this.$router.push({ path: 'new' })
    },
    // 首次进入页面进入列表
    async getFirstList () {
      this.listLoading = true
      const { data } = await list(this.requestParameters)
      this.basicsQues = data.items
      this.total = data.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 获取学科简单列表
    async  subSimple () {
      const { data } = await subSimple(this.page, this.pagesize, this.formData.subjectID)
      this.subNameList = data
      // console.log(data)
    },
    // 获取二级目录列表
    async  handleSub (name) {
      // const { data } = await dirSimple(this.formData.subjectID)
      const { data } = await dirSimple(name)
      // console.log(data)
      this.twoLeveList = data
      this.requestParameters.twoLevelDisplay = this.twoLeveList[0]
    },
    // 获取标签接口
    async  tagsSimple (name) {
      const { data } = await tagsSimple(name)
      // console.log(data)
      this.tagsList = data
      this.requestParameters.tags = this.tagsList[0]
    },
    // 获取用户简单列表
    async userSimple () {
      const { data } = await userSimple(this.keyword)
      // console.log(data)
      this.people = data
    },
    // 获取基础题库列表
    async getList () {
      this.listLoading = true
      // 过滤掉空的内容
      const formData = omitBy(this.formData, (value, key) => isEmpty(value) && !isNumber(value))
      const { data: res } = await list(formData)
      // 获取数据给dataList
      this.basicsQues = res.items
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 重置(点击清除实现清空)
    resetForm () {
      // this.$refs.formData.resetFields()
      this.formData = {}
      // this.citySelect = {}
    },
    // 点击按钮实现修改
    edit (id) {
      this.$router.push({
        name: 'questions-new',
        query: {
          id: id
        }
      })
    },
    // 点击实现 删除功能
    removeQues (id) {
      this.$confirm('此操作将永久删除该题目 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          // 调用删除接口
          await remove(id)
            .then(response => {
              // 提示成功
              this.$message.success('成功移除题库' + '!')
              // 刷新数据
              this.getFirstList()
              // 关闭弹窗
              this.showDialog = false
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 添加到精选题库
    addChoice (data) {
      this.$confirm('此操作将该题目添加到精选题库' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          // 调用加入精选题库接口
          await choiceAdd(data)
            .then(response => {
              // 提示成功
              this.$message.success('成功加入精选题库' + '!')
              // 刷新数据
              this.getFirstList()
              // 关闭弹窗
              this.showDialog = false
            })
            .catch(response => {
              this.$message.error('操作失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 搜索信息
    handleFilter () {
      this.requestParameters.page = 1
      this.getList()
    },
    // 搜索的项目
    // 添加、编辑之后表单清空
    query () {
      this.formData = {}
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.requestParameters.city = this.citySelect.cityDate[0]
    },
    // 点击预览按钮 实现预览弹出层弹出
    async lookView (id) {
      // console.log(id)
      this.showDialogs = true
      const { data } = await detail(id)
      console.log(data)
      this.quesMess = data
      this.quesTion = data.options
    },
    // 视频显示与隐藏
    videoPlay () {
      if (this.vedios === false) {
        this.vedios = true
      } else {
        this.vedios = false
      }
    },
    // 分页组件事件
    // 每页显示信息条数
    handleSizeChange (val) {
      console.log(val)
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getFirstList()
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getFirstList()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.questionsChoice-contain{
  margin: 10px;
}
.btn-wrapper{
  display:flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.total{
  display: flex;
  align-items: center;
  padding-left: 15px;
  width: 100%;
  height: 30px;
  background-color: #f4f4f5;
  color:#909399
}
.block{
  margin-top: 10px;
  display: flex;
  justify-content: end;
}
.quesStyle{
  padding: 10px 40px;
}

i{
  font-style:normal
}
.pages{
  display: flex;
  justify-content: end;
  align-items: center;
  margin-top: 20px;
}
 .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
    background-color: white;
    color: #86a9e9;
    border: 1px solid #86a9e9;
}

.button1:hover {
    background-color: #86a9e9;
    color: white;
}

.button2 {
    background-color: white;
    color: #5ee745;
    border: 1px solid #5ee745;
}

.button2:hover {
    background-color: #5ee745;
    color: white;
}

.button3 {
    background-color: white;
    color: #f44336;
    border: 1px solid #f44336;
}

.button3:hover {
    background-color: #f44336;
    color: white;
}

.button4 {
    background-color: white;
    color: #f18a29f6;
    border: 1px solid #f18a29f6;
}

.button4:hover {
  background-color: #f18a29f6;
  color: white;
  }

</style>
